<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title {
            width: 200px;
            height: 50px;
            margin: auto;

        }

        a {
            text-decoration: none;
            color: #000;
        }

        .newslist li {
            width: 200px;
            height: 36px;
            line-height: 36px;
            margin: auto;
            position: relative;
            counter-increment: item-counter;
            list-style: none;
        }

        /* .newslist li a {
            color: #000;
            text-decoration: none;
        }

        .newslist li a:hover {
            color: blue;
            text-decoration: underline;
        } */

        .newslist li::after {
            display: block;
            position: absolute;
            width: 24px;
            height: 24px;
            top: 4px;
            left: -25px;
            line-height: 24px;
            text-align: center;
            color: red;
            font-weight: bold;
            content: counter(item-counter);
        }
    </style>
</head>

<body>
    <div class="wrapper"></div>
    <div class="title">
        <span id="hot"><a href="#">百度热搜</a></span>
        <span id="change"><a href="#">换一换</a></span>
    </div>
    <ul class="newslist">
        <!-- <li></li> -->
    </ul>
</body>

</html>
<script>
    var newslist = document.querySelector(".newslist")
    var change = document.getElementById("change")
    let arr = [
        "111111111111",
        "111111111111",
        "111111111111",
        "111111111111",
        "111111111111",
        "111111111111",
        "222222222222",
        "222222222222",
        "222222222222",
        "222222222222",
        "222222222222",
        "222222222222",
        "333333333333",
        "333333333333",
        "333333333333",
        "333333333333",
        "333333333333",
        "333333333333",
        "444444444444",
        "444444444444",
        "444444444444",
        "444444444444",
        "444444444444",
        "444444444444",
        "555555555555",
        "555555555555",
        "555555555555",
        "555555555555",
        "555555555555",
        "555555555555",
        "666666666666",
        "666666666666",
        "666666666666",
        "666666666666",
        "666666666666",
        "666666666666",
    ]

    var pageNum = 1;
    var max = Math.ceil(arr.length / 6);
    var news = [];
    changeNew();
    change.onclick = changeNew;

    function changeNew() {
        if (pageNum > max) {
            pageNum = 1
        }
        news = arr.slice(6 * (pageNum - 1), 6 * pageNum);
        setNews(news)
        pageNum++
    }

    function setNews(news) {
        let str = ""
        for (let i = 0; i < news.length; i++) {
            str += `<li><a href="#">${news[i]}</a></li>`

        }
        newslist.innerHTML = str;
    }
</script>